// 插件瀑布流
$(function () {
  $('#gallery-wrapper').pinterest_grid({
    no_columns: 4,
    padding_x: 20,
    padding_y: 20,
    margin_bottom: 50,
    single_column_breakpoint: 700,
  });
});
var str = '';
var str2 = '';
data.goodData.forEach(function (value, i, arr) {
  function Xuanran() {
    if (i == 16) {
      return;
    }
    if (value.Proprietary == 1) {
      str += `  <article class="white-panel">
      <div class="white-panel_box">
        <div class="li_aixin">
          <a href="javascript:void(0)"
            ><i class="iconfont icon-56aixin"></i
          ></a>
        </div>
  
        <a href="" >
        <img
        src="${value.img}"
        class="thumb"
        title="${value.brand}"
    />
        </a>
        <div class="shop_text">
  
          <div class="shop-log">
            <a href=""
            ><img
                src="${value.log}"
                alt="${value.brand}"
            /></a>
          </div>
  
          <h1><a href="">${value.title}</a></h1>
  
          <div class="seller-sr">平台自营</div>
          <p>主营品牌: &nbsp;&nbsp; <span>${value.brand}</span></p>
          <p>
  
            商家等级:&nbsp;&nbsp;
  
            <img
              src="${value.grade}"
              alt=""
            />
          </p>
        </div>
      </div>
    </article>`;
    } else {
      str += `  <article class="white-panel">
      <div class="white-panel_box">
        <div class="li_aixin">
          <a href="javascript:void(0)"
            ><i class="iconfont icon-56aixin"></i
          ></a>
        </div>
  
        <a href="">
          <img
            src="${value.img}"
            class="thumb"
            alt="${value.brand}"
          />
        </a>
        <div class="shop_text">
  
          <div class="shop-log">
            <a href=""
              ><img
                src="${value.log}"
                alt="${value.brand}"
            /></a>
          </div>
  
          <h1><a href="">${value.title}</a></h1>
  
         
          <p>主营品牌: &nbsp;&nbsp; <span>${value.brand}</span></p>
          <p>
  
            商家等级:&nbsp;&nbsp;
  
            <img
              src="${value.grade}"
              alt=""
            />
          </p>
        </div>
      </div>
    </article>`;
    }
  }
  Xuanran();
  if (i == 16) {
    if (value.Proprietary == 1) {
      str2 += `  <article class="white-panel">
      <div class="white-panel_box">
        <div class="li_aixin">
          <a href="javascript:void(0)"
            ><i class="iconfont icon-56aixin"></i
          ></a>
        </div>
  
        <a href="" >
        <img
        src="${arr[i].img}"
        class="thumb"
        title="${arr[i].brand}"
    />
        </a>
        <div class="shop_text">
  
          <div class="shop-log">
            <a href=""
            ><img
                src="${arr[i].log}"
                alt="${arr[i].brand}"
            /></a>
          </div>
  
          <h1><a href="">${arr[i].title}</a></h1>
  
          <div class="seller-sr">平台自营</div>
          <p>主营品牌: &nbsp;&nbsp; <span>${arr[i].brand}</span></p>
          <p>
  
            商家等级:&nbsp;&nbsp;
  
            <img
              src="${arr[i].grade}"
              alt=""
            />
          </p>
        </div>
      </div>
    </article>`;
    } else {
      str2 += `  <article class="white-panel">
      <div class="white-panel_box">
        <div class="li_aixin">
          <a href="javascript:void(0)"
            ><i class="iconfont icon-56aixin"></i
          ></a>
        </div>
  
        <a href="">
          <img
            src="${arr[i].img}"
            class="thumb"
            alt="${arr[i].brand}"
          />
        </a>
        <div class="shop_text">
  
          <div class="shop-log">
            <a href=""
              ><img
                src="${arr[i].log}"
                alt="${arr[i].brand}"
            /></a>
          </div>
  
          <h1><a href="">${arr[i].title}</a></h1>
  
         
          <p>主营品牌: &nbsp;&nbsp; <span>${arr[i].brand}</span></p>
          <p>
  
            商家等级:&nbsp;&nbsp;
  
            <img
              src="${arr[i].grade}"
              alt=""
            />
          </p>
        </div>
      </div>
    </article>`;
    }
  }
});
// 初始化渲染数据
$('#gallery-wrapper').get(0).innerHTML += str;
// 点击第二页渲染最后一条数据
$('.pags-item')
  .eq(2)
  .click(function () {
    $('#gallery-wrapper').get(0).innerHTML = str2;
    Axin();
    $(this).toggleClass('cur').prev().removeClass('cur');
  })
  .prev() //点击第一页再次渲染第一页数据
  .click(function () {
    $('#gallery-wrapper').get(0).innerHTML = str;
    Axin();
    $(this).toggleClass('cur').next().removeClass('cur');
  })
  .prev()
  .click(function () {
    $('#gallery-wrapper').get(0).innerHTML = str;
    Axin();
    if ($('.pags-item').eq(1).text() == 1) {
      $('.pags-item').eq(1).addClass('cur').next().removeClass('cur');
    } else {
      $('.pags-item').eq(1).addClass('cur').next().removeClass('cur');
    }
  })
  .nextAll('.next')
  .click(function () {
    $('#gallery-wrapper').get(0).innerHTML = str2;
    Axin();
    if ($('.pags-item').eq(2).text() == 2) {
      $('.pags-item').eq(2).addClass('cur').prev().removeClass('cur');
    } else {
      $('.pags-item').eq(2).addClass('cur').prev().removeClass('cur');
    }
  });
// 点击爱心
function Axin() {
  $('.li_aixin').click(function () {
    $(this)
      .children()
      .children()
      .toggleClass('iconfont icon-56aixin')
      .toggleClass('iconfont icon-aixin');
  });
}
Axin();

// 点击 分类 省份标签 改变类名
$('.c-li-a').click(function () {
  $(this).parent().addClass('c-li-a-red').siblings().removeClass('c-li-a-red');
});
// 省份
$('.provinces-a').click(function () {
  $(this).parent().addClass('c-li-a-red').siblings().removeClass('c-li-a-red');
});
// 排序方式 点击事件
$('.r-btn').click(function () {
  // 点击切换类名
  $(this).addClass('btn-red').siblings().removeClass('btn-red');
  //   切换字体图标
  $(this)
    .children('i')
    .toggleClass('iconfont icon-jiantou-shang-cuxiantiao')
    .toggleClass('iconfont icon-jiantou-xia-cuxiantiao');
});
